<template>
  <el-dialog
    title="企业微信登录"
    :visible.sync="$attrs.visable"
    :width="width"
    :before-close="handleClose"
  >
    <div v-if="loading" class="login_left p-20">
      <div class="flex mb-20">
        <img src="https://wework.qpic.cn/wwpic3az/472059_fDikGmxURW66p1D_1701391824/0" alt="" class="user_avatar mr-20" />
        <div class="">
          <div class="c_text2 mb-4 f-14">Gardenia</div>
          <div class="c_f90 f-14">@云涌传媒</div>
        </div>
      </div>
      <div class="infoitem flex aligncenter">
        <i class="el-icon-info c_primary mr-6 f-16"></i>
        <span>正在登录，请稍候</span>
      </div>
    </div>
    <div v-else class="flexcenter">
      <div class="login_right">
        <div class="f-16 c_fff mt-20 flexcenter">企业微信扫码开始使用</div>
        <div class="codebox bg_fff flexcolumn aligncenter justifycenter">
          <div class="f-14">二维码已过期</div>
        </div>
        <div class="flexcenter c_fff mb-4">如果扫描二维码失效过期</div>
        <div class="flexcenter c_fff">请点击“重试”按钮</div>
        <div class="reset_btn commhover flexcenter bg_fff c_primary mt-20">重试</div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      infoList: [
        { name: "不要登录电脑版企业微信" },
        { name: "不要在企业微信手机端【切换企业】" },
        { name: "不要在企业微信手机端【退出登录】" },
        { name: "不要退出企业微信上方的【已登录】" },
        { name: "不要在其他设备上登录托管的企业微信" },
      ],
      // width:'520px',
      width:'380px',
      loading:false
    };
  },
  methods: {
    handleClose() {
      this.$emit("close"); //关闭弹窗;
    },

    handleNodeClick(data) {
      //   console.log('data:',data)
      this.changeData(this.groupList);
      data.checked = true;
    },

    changeData(data) {
      data.forEach((item) => {
        item.checked = false;
        if (item.children && item.children.length)
          this.changeData(item.children);
      });
    },

    handleSubmit(){},
  },
};
</script>
<style lang="scss" scoped>
.login_left {
  flex: 1;
  background-color: rgba(47, 84, 235, 0.08);
  border-radius: 4px;
}
.user_avatar{
  width: 40px;
  height: 40px;
  border-radius: 4px;
}
.login_right {
  width: 260px;
  background: linear-gradient(180deg, #519ff1, #2866de);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
}
.infoitem {
  background-color: #fff;
  border-radius: 2px;
  margin-bottom: 8px;
  padding: 12px 15px 12px 37px;
}
.warntext {
  color: #ff4949;
  padding: 8px 0;
}
.codebox {
  width: 180px;
  height: 180px;
  margin: 16px 0;
  border-radius: 4px;
  color: #666;
  line-height: 22px;
}
.reset_btn {
  padding: 4px 15px;
  height: 32px;
  border-radius: 4px;
}

</style>